<!--
 * @Description: 
 * @Version: 1.0
 * @Author: Will
 * @Date: 2021-12-06 14:15:37
 * @LastEditors: MarsLay 331412466@qq.com
 * @LastEditTime: 2024-02-19 13:58:33
 * @FilePath: \cloud-space\pages\assets\discern.vue
 * Copyright (C) 2021 Will. All rights reserved.
-->
<template>
  <l-page title="消息">
    <view class="list">
      <z-paging ref="paging" v-model="list" @query="queryList">
        <view class="inner-list">
          <view class="single" v-for="v in list" :key="v.id">
            <view class="icon">
              <view v-if="v.isShow" class="dot"></view>
              <image class="icon-inner" mode="aspectFill" :src="v.icon"></image>
            </view>
            <view class="txt">{{ v.title }}</view>
          </view>
        </view>
      </z-paging>
    </view>
  </l-page>
</template>

<script>
export default {
  name: "notice",
  components: {},
  data() {
    return {
      screen: {
        limit: "",
        page: "",
      },
      list: [{ id: 0, title: '系统消息提醒', icon: '../../static/img/icon/system-icon.png', isShow: true },
      { id: 1, title: '成团成功提醒', icon: '../../static/img/icon/team-icon.png', isShow: true },
      { id: 2, title: '行程出发提醒', icon: '../../static/img/icon/trip-icon.png', isShow: true }]
    };
  },
  computed: {},
  watch: {},
  onLoad(d) { },
  onShow() { },
  methods: {
    queryList(pageNo, pageSize) {
      this.screen.page = pageNo;
      this.screen.limit = pageSize;
      this.getList();
    },
    getList() {
      this.$refs.paging.complete(this.list);
    }
  },
  onUnload() { },
};
</script>
<style lang="less" scoped>
.inner-list {
  padding: 20upx;

  .single {
    .flex(row, flex-start);
    padding: 0 20upx;
    width: 100%;
    height: 100upx;
    background: #FFFFFF;
    border-radius: 16upx;

    &:not(:last-child) {
      margin-bottom: 20upx;
    }

    .icon {
      position: relative;
      width: 68upx;
      height: 68upx;

      .dot {
        position: absolute;
        top: 2upx;
        right: 2upx;
        width: 14upx;
        height: 14upx;
        background: #EF2900;
        border-radius: 50%;
      }
    }

    .txt {
      margin-left: 10upx;
      font-size: 28upx;
      color: #333333;
      line-height: 36upx;
    }
  }
}
</style>